<template>
	<el-switch
		v-model="themeConfig.isDark"
		@change="onAddDarkChange"
		inline-prompt
		active-color="#0a0a0a"
		inactive-color="#dcdfe6"
		:active-icon="Sunny"
		:inactive-icon="Moon"
	></el-switch>
</template>
<script lang="ts" setup name="SwitchDark">
import { GlobalStore } from "@/stores";
import { computed } from "vue";
import { Sunny, Moon } from "@element-plus/icons-vue";
import { useTheme } from "@/hooks/useTheme";

const { switchDark } = useTheme();

const globalStore = GlobalStore();

const themeConfig = computed(() => globalStore.themeConfig);

const onAddDarkChange = () => {
	switchDark();
};
</script>
<style lang="scss" scoped></style>
